<template>
  <s-layout
    title="我的"
    tabbar="/pages/index/user"
    navbar="custom"
    onShareAppMessage
    :showFloatButton="true"
  >
    <view class="head pad30">
      <view class="user-card">
        <view class="user-info">
          <image
            class="avatar"
            :src="userInfo.avatar"
            v-if="userInfo.avatar && userInfo.uid"
            @click="jumpBylink('/pages/user/info')"
          ></image>
          <image v-else class="avatar" src="/static/images/f.png" mode="" @click="jumpBylink('/pages/user/info')"></image>
          <view class="info">
            <view class="name" v-if="!userInfo.uid" @tap="openAuto"> 请点击登录 </view>
            <view class="name" v-if="userInfo.uid">
              {{ userInfo.nickname }}
              <view class="vip" v-if="userInfo.vip">
                <image :src="userInfo.vipIcon" alt="" />
                <view style="margin-left: 10rpx" class="vip-txt"
                  >{{ userInfo.vipName || '' }}
                </view>
              </view>
            </view>
            <view class="num" v-if="userInfo.phone && userInfo.uid" @click="jumpBylink('/pages/user/info')">
              <view class="num-txt">{{ userInfo.phone }}</view>
              <view class="icon">
                <image src="/static/images/edit.png" mode=""></image>
              </view>
            </view>
            <view class="phone" v-if="!userInfo.phone && isLogin" @tap="bindPhone">绑定手机号</view>
          </view>
        </view>
        <view class="num-wrapper">
          <view class="num-item" @click="jumpBylink('/pages/user/wallet/money')">
            <text class="num">{{
              userInfo.nowMoney && userInfo.uid ? Number(userInfo.nowMoney).toFixed(2) : 0
            }}</text>
            <view class="txt">余额</view>
          </view>
          <view class="num-item" @click="jumpBylink('/pages/user/wallet/score')">
            <text class="num">{{ userInfo.integral && userInfo.uid ? userInfo.integral : 0 }}</text>
            <view class="txt">积分</view>
          </view>
          <view class="num-item" @click="jumpBylink('/pages/coupon/list')">
            <text class="num">{{ userInfo.couponCount && userInfo.uid ? userInfo.couponCount : 0 }}</text>
            <view class="txt">优惠券</view>
          </view>
          <view class="num-item" @click="jumpBylink('/pages/user/goods-collect')">
            <text class="num">{{ userInfo.collectCount && userInfo.uid ? userInfo.collectCount : 0 }}</text>
            <view class="txt">收藏</view>
          </view>
        </view>
        <!-- <view class="sign" @click="goSignIn">签到</view> -->
      </view>
      <view class="order-wrapper">
        <view class="order-hd flex">
          <view class="left">订单中心</view>
          <view
            class="right flex"
            @click="jumpBylink('/pages/order/list')"
          >
            查看全部
            <text class="iconfont icon-xiangyou"></text>
          </view>
        </view>
        <view class="order-bd">
          <block v-for="(item, index) in orderMenu" :key="index">
            <view class="order-item" hover-class="none" :url="item.url">
              <view class="pic">
                <image :src="item.img" mode=""></image>
                <text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
              </view>
              <view class="txt">{{ item.title }}</view>
            </view>
          </block>
        </view>
      </view>
    </view>
    <view class="contenBox">
      <!-- 轮播 -->
      <view class="slider-wrapper" v-if="imgUrls.length > 0">
        <swiper
          indicator-dots="true"
          :autoplay="true"
          :circular="true"
          :interval="3000"
          :duration="500"
          indicator-color="rgba(255,255,255,0.6)"
          indicator-active-color="#fff"
        >
          <block v-for="(item, index) in imgUrls" :key="index">
            <swiper-item class="borRadius14">
              <image :src="item.pic" class="slide-image" @click="navito(item.url)"></image>
            </swiper-item>
          </block>
        </swiper>
      </view>

      <!-- 会员菜单 -->
      <view class="user-menus" style="margin-top: 20rpx">
        <view class="menu-title">我的服务</view>
        <view class="list-box">
          <block v-for="(item, index) in MyMenus" :key="index" >
            <view
              class="item"
              @click="jumpBylink(item.url)"
              v-if="
                !(
                  item.url == '/pages/service/index' ||
                  (item.url == '/pages/users/user_spread_user/index' && !userInfo.isPromoter)
                )
              "
            >
              <image :src="item.pic"></image>
              <text>{{ item.name }}</text>
            </view>
          </block>
        </view>
      </view>
      <view class="uni-p-b-98"></view>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed } from 'vue';
  import { onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import mall from '@/mall';
  import { getMenuList } from '@/mall/api/user';
  const orderMenu = 	ref([{
						img: '/static/images/order1.png',
						title: '待付款',
						url: '/pages/order/list?status=0',
						num: 0
					},
					{
						img: '/static/images/order2.png',
						title: '待发货',
						url: '/pages/order/list?status=1',
						num: 0
					},
					{
						img: '/static/images/order3.png',
						title: '待收货',
						url: '/pages/order/list?status=2',
						num: 0
					},
					{
						img: '/static/images/order4.png',
						title: '待评价',
						url: '/pages/order/list?status=3',
						num: 0
					},
					{
						img: '/static/images/order5.png',
						title: '售后/退款',
						url: '/pages/users/user_return_list/index',
						num: 0
					},
				]) 
  const MyMenus= ref([])
  const imgUrls = ref([])
 // 隐藏原生tabBar
  uni.hideTabBar();

  const isLogin = computed(() => mall.$store('user').isLogin);
const userInfo = computed(() => mall.$store('user').userInfo);
  onShow(() => {
    mall.$store('user').updateUserData();
    getMymenus()
  });

  onPullDownRefresh(() => {
    mall.$store('user').updateUserData();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });
 function jumpBylink(url){
mall.$router.go(url)
  }
  async function getMymenus(){
    if (MyMenus.value.length) {
      return
    }
    let {data} = await getMenuList()
    MyMenus.value = data.routine_my_menus
    imgUrls.value = data.routine_my_banner || []
  }
  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 420rpx;
    background-image: url('~@/static/images/user_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .contenBox {
    padding: 0 30rpx;
  }

  .support {
    width: 219rpx;
    height: 74rpx;
    margin: 54rpx auto;
    display: block;
  }

  .head {
    background: linear-gradient(
      360deg,
      rgba(255, 121, 49, 0) 0%,
      rgba(248, 74, 29, 0.82) 39%,
      #e93323 100%
    );
    // padding: 0 30rpx;

    .user-card {
      position: relative;
      width: 100%;
      margin: 0 auto;
      padding: 35rpx 0 30rpx 0;
      .user-info {
        z-index: 20;
        position: relative;
        display: flex;

        .avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }

        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20rpx;
          padding: 15rpx 0;

          .name {
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 31rpx;

            .vip {
              display: flex;
              align-items: center;
              padding: 6rpx 20rpx;
              background: rgba(0, 0, 0, 0.2);
              border-radius: 18px;
              font-size: 20rpx;
              margin-left: 12rpx;

              image {
                width: 27rpx;
                height: 27rpx;
              }
            }
          }

          .num {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: rgba(255, 255, 255, 0.6);

            image {
              width: 22rpx;
              height: 23rpx;
              margin-left: 20rpx;
            }
          }
        }
      }

      .num-wrapper {
        z-index: 30;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 30rpx;
        color: #fff;

        .num-item {
          width: 33.33%;
          text-align: center;

          .num {
            font-size: 42rpx;
            font-weight: bold;
          }

          .txt {
            margin-top: 10rpx;
            font-size: 26rpx;
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }

      .sign {
        z-index: 200;
        position: absolute;
        right: -12rpx;
        top: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 60rpx;
        background: linear-gradient(90deg, rgba(255, 225, 87, 1) 0%, rgba(238, 193, 15, 1) 100%);
        border-radius: 29rpx 4rpx 4rpx 29rpx;
        color: #282828;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .order-wrapper {
      background-color: #fff;
      border-radius: 14rpx;
      padding: 30rpx 16rpx;
      position: relative;
      z-index: 11;

      .order-hd {
        justify-content: space-between;
        font-size: 30rpx;
        color: #282828;
        margin-bottom: 40rpx;
        padding: 0 16rpx;

        .left {
          color: #282828;
          font-size: 30rpx;
          font-weight: 600;
        }

        .right {
          align-items: center;
          color: #666666;
          font-size: 26rpx;

          .icon-xiangyou {
            margin-left: 5rpx;
            font-size: 24rpx;
          }
        }
      }

      .order-bd {
        display: flex;
        justify-content: space-between;
        padding: 0;

        .order-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .pic {
            position: relative;
            text-align: center;

            image {
              width: 48rpx;
              height: 48rpx;
            }
          }

          .txt {
            margin-top: 15rpx;
            font-size: 26rpx;
            color: #454545;
          }
        }
      }
    }
  }

  .slider-wrapper {
    margin: 20rpx 0;
    height: 138rpx;

    swiper,
    swiper-item {
      height: 100%;
    }

    image {
      width: 100%;
      height: 100%;
    }
  }

  .user-menus {
    background-color: #fff;
    border-radius: 14rpx;

    .menu-title {
      padding: 30rpx 30rpx 40rpx;
      font-size: 30rpx;
      color: #282828;
      font-weight: 600;
    }

    .list-box {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
    }

    .item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      width: 25%;
      margin-bottom: 47rpx;
      font-size: 26rpx;
      color: #333333;

      image {
        width: 52rpx;
        height: 52rpx;
        margin-bottom: 18rpx;
      }

      &:last-child::before {
        display: none;
      }
    }

    button {
      font-size: 28rpx;
    }
  }

  .phone {
    color: #fff;
  }

  .order-status-num {
    min-width: 12rpx;
    background-color: #fff;
    color: #ee5a52;
    border-radius: 15px;
    position: absolute;
    right: -14rpx;
    top: -15rpx;
    font-size: 20rpx;
    padding: 0 8rpx;
    border: 1px solid #ee5a52;
  }
</style>
